<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>选项卡切换示例</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f0f0f0;
        margin: 0;
        padding: 20px;
    }
    .container {
        width: 60%;
        min-width: 360px;
        margin: auto;
        background-color: white;
        box-shadow: 0 0 5px rgba(0,0,0,0.1);
        padding: 20px;
        border-radius: 5px;
    }
    .tabs {
        display: flex;
        list-style-type: none;
        margin-bottom: 20px;
        border-bottom: 2px solid #4CAF50;
    }
    .tab {
        cursor: pointer;
        padding: 10px 20px;
        margin-right: 5px;
        background-color: #f9f9f9;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
    }
    .tab:hover{
        background-color: #4CAF50;
        color: white;
        border-bottom-color: #4CAF50;
    }
    .active {
        background-color: #4CAF50;
        color: white;
        border-bottom-color: #4CAF50;
    }
    .content {
        display: none;
        padding: 20px 0;
    }
    .show {
        display: block;
    }
</style>
</head>
<body>

<div class="container">
    <ul class="tabs">
        <li class="tab active" onclick="openTab('tab1')">选项卡 1</li>
        <li class="tab" onclick="openTab('tab2')">选项卡 2</li>
        <li class="tab" onclick="openTab('tab3')">选项卡 3</li>
    </ul>

    <div id="tab1" class="content show">
        <h2>选项卡 1 的内容</h2>
        <p>这里是选项卡1展示的内容。</p>
    </div>

    <div id="tab2" class="content">
        <h2>选项卡 2 的内容</h2>
        <p>这里是选项卡2展示的内容。</p>
    </div>

    <div id="tab3" class="content">
        <h2>选项卡 3 的内容</h2>
        <p>这里是选项卡3展示的内容。</p>
    </div>
</div>

<script>
    function openTab(tabId) {
        var tabs = document.getElementsByClassName("tab");
        var contents = document.getElementsByClassName("content");

        for (var i = 0; i < tabs.length; i++) {
            tabs[i].classList.remove("active");
            contents[i].classList.remove("show");
        }

        document.getElementById(tabId).classList.add("show");
        event.currentTarget.classList.add("active");
    }
</script>

</body>
</html>